<template>
  <div v-if="goodsData">
    <van-nav-bar
      :title="goodsData.proname"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-swipe class="my-swipe swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(item, index) in goodsData.banners[0].split(',')"
        :key="item.proid"
      >
        <img v-img="item" @click="steImagePreview(index)" />
      </van-swipe-item>
    </van-swipe>
    <div style="padding: 10px">
      <van-tag type="danger" size="large">自营</van-tag>
      <span v-text="goodsData.proname" style="margin-left: 10px"></span>
      <p style="color: red; font-weight: 900">
        ￥{{ goodsData.originprice | formatPrice }}
      </p>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        :badge="Allnum"
        text="购物车"
        v-if="Allnum > 0"
        @click="$router.push('/category')"
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        v-else
        @click="$router.push('/category')"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="danger"
        text="加人购物车"
        @click="addGoodsCart"
      />
    </van-goods-action>
  </div>
</template>
<script>
import { getGoodsDetail } from '@/api/goods'
import { ImagePreview } from 'vant'
import { mapMutations } from 'vuex'
export default {
  name: 'GoodsDetail',
  data () {
    return {
      goodsData: null,
      show: false,
      imaIndex: 0,
      images: []
    }
  },
  mounted () {
    this.getGoodsDetailData()
  },
  methods: {
    ...mapMutations('cart', ['addToCart']),
    async getGoodsDetailData () {
      const res = await getGoodsDetail(this.$route.params.proid)
      this.goodsData = res.data
      this.images = res.data.banners[0].split(',')
    },
    onClickLeft () {
      this.$router.back()
    },
    onChange (index) {
      this.index = index
    },
    steImagePreview (index) {
      ImagePreview(this.images, index)
    },
    addGoodsCart () {
      this.goodsData.num = 1
      this.goodsData.checked = true
      const goodsinfo = {
        proname: this.goodsData.proname,
        checked: true,
        img1: this.goodsData.img1,
        num: 1,
        id: this.goodsData.proid,
        price: this.goodsData.originprice
      }
      this.addToCart(goodsinfo)
    }
  },
  filters: {
    formatPrice (value) {
      return value.toFixed(2)
    }
  }
}
</script>
